<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>商品详情</title>
<link rel="stylesheet" href="./static/css/common.css">
<link rel="stylesheet" href="./static/css/swiper.min.css">
<style>
  body{
    color: #4A4A4A;
  }
    .hopbox{
    min-height: 100vh;
    background:#F8F8F8;
  }
  .bgf{
    background:#fff
  }
  .viedoBox{
    height: 230px;
  }
  .header{
    padding: 10px 15px 0 15px;
  }
 
  .user .userInfo{
    color: #535252;
    margin-left:10px;
    flex:1;
  }
  .viedoList{
    margin:10px 15px;
  }
  .openTime img, .address img{
    width:12px;
    height: 12px;
    display: inline-block;
    position: relative;
    top: 2px;
    vertical-align: initial;

  }

  .tellBox{
    width:60px;
    height: 60px;
    border-radius: 30px;
    overflow: hidden;
    margin-right: 10px;
  }
  .tellBox img{
    display: inline-block;
    width:100%;
    height: 100%;
  }
  .listbox{
    display: flex;
    margin:10px 0;
    align-items: center
  }
  .listbox .left {
    width: 100px;
    height: 60px;
    margin-right: 10px;
  }
  .listbox .left img{
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .swiper-wrapper div{
    height: 375px;
    overflow: hidden;
    width: 100%;
  }
  .swiper-wrapper .swiperImage{
    width: 100%;
    /* height: 100%; */
    display: inline-block;
  }
  .user .headbox{
    width: 34px;
    height: 34px;
    border-radius: 17px;
    overflow: hidden;
  }
  .user .userInfo .time{
    color: #e0e0e0;
    font-size: 12px;
  }
  .user .userInfo .userName{
    margin-top: -2px;
  }
  .startbox{
    display: flex;
    align-items: center;
    margin:10px 0;
    border-bottom: 5px solid #F9F8F8;
    border-top: 5px solid #F9F8F8;
    padding:15px 15px;
  }
  .startbox p{
    margin: 0;
  }
  .doctorFix{
        padding: 15px;
     display: flex;
     align-items: center;
     box-shadow: 0 0 10px 0 #e0e0e0;
  }
  .listImage{
  width: 34px;
    height: 34px;
    border-radius: 17px;
    display: inline-block;
    margin-right:2px
  }
  .startImagesbox{
    flex: 1;
  }
  .acitvebox{
    background: #FEF5F6;
    padding: 10px 20px;
    color:#E2717C;
    font-size: 13px;
  }
  .navmen{
    font-size: 16px;
    height: 48px;
    line-height: 40px;
    border-bottom: 2px solid #F9F8F8;
  }
  .navmenbox div{
    line-height: 48px;
  }
  .navmenbox{
    position: relative;
  }
  .active{
    color:#5BA8F7
  }
  .active::after{
    content:'';
    width:40px;
    height:4px;
    margin-left:-20px;
    left:50%;
    position: absolute;
    bottom:2px;
    background: #5BA8F7;
    border-radius: 10px;
  }
  .doctorName{
    border-radius: 10px;
  }
  .doctorHeader{
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 25px;
    overflow: hidden;
  }
  .doctorHeader img{
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .certsImg{
    display: inline-block;
    width: 32%;
  }
  .acitveTitle{
    padding:0 5px;
    background: #E2717C;
    border-radius: 10px;
    color:#fff;
    font-size: 12px
  }
  .navmen{
    display: flex;

  }
  .navmen>div{
    flex: 1;
  }
  .telGoBox{
    display: flex;
    height: 48px;
    text-align: center;
    align-items: center;
    
    border-bottom: 1px solid #F9F8F8;
  
  }
  .telGoBox a:first-child{
    border-right: 1px solid  #F9F8F8
  }
  .telGoBox a{
    flex:1;
    text-decoration: none;
    height:48px;
    line-height: 48px;
    border-bottom: 1px solid #F9F8F8;
    color: #5BA8F7;
  }
  .telGoBox a>img{
    display: inline-block;
    width: 24px;
    height: 24px;
    position: relative;
    vertical-align: text-bottom;
    top:3px;
  } 
  .flex{
    display: flex;
    align-content: space-around;
  }
  .leftIMg{
    width: 90px;
    height: 100px;
    border-radius: 4px;
    margin-right: 10px;
  }
  .acitveItem{
    border-bottom: 1px solid #F2F1F1
  }
  
  #seiper img{
    display: inline-block;
    width: 100%;
    height: 270px;
  }
  .fuwu{
    color:#fff;border-radius: 2px;padding:0 4px;
    font-size: 12px;
  }
  .fu1{
    margin:0 16px; 
    background:#9BC9F9;
  }
  .fu2{
    background:#F86674;
  }
  .choochImg{
    vertical-align: sub;
    width: 14px;
    height: 14px;
    margin-right: 3px;
  }
  .baoz{
    margin:0 16px;
  }
  .mif{
    height: 40px;
    align-items: center;border-top:1px solid #F9F8F8;
  }
  .redius{
    color: #fff;
    font-size: 12px;
    padding: 3px 14px;
    border-radius: 10px;
  }
  .bgy{
    background: #FCC942;
    margin:0 16px;
  }
  .bgr{
    background: #FD7E8A;
  }
  .oneLine{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin:5px 0 !important;
  }
  .oneLine img{
    vertical-align: sub;
    width: 14px;
    height: 14px;
    margin-right: 4px
  }

</style>
    
</head>
<body>
  <div id="app" v-cloak>
    <div class="swiper-container">
        <div class="swiper-wrapper" id="seiper">
          <img :src="banner" alt="">
        </div>
        <div class="swiper-pagination"></div>
      </div>
      
      <div class="header bgf">
          <h4 class="font4" style="color:#535252">{{title}}</h4>
          <div class="flex" style="align-items: baseline;">
            <div style="color:#F86674;"> ¥ </div>
            <div class="flex1" >
              <span style="color:#F86674;padding:3px;font-size:18px;font-weight: 600">{{price }}</span>
              <span class="gray">原价：¥{{originalPrice}}</span>
            </div>
            <div class="gray">已售：{{payCount}}</div>
          </div>
          <div style="padding:12px 0">
            <span class="gray" style="margin-right:16px">服务</span>
            <span v-for="(chiItem,chiIn) in productMarks" v-bind:style="'color:#fff;font-size:12px;padding:2px 5px;border-radius:2px;background:'+chiItem.color+' !important'">{{chiItem.name}}</span>
                    
          </div>
          <div class="flex" style="padding:10px 0;align-items: center;">
            <div class="flex1">
              <span class="gray">保障</span>
              <span class="baoz"><img class="choochImg" src="./static/image/choose@2x.png" alt=""> 随时退</span>
              <span class="baoz"><img class="choochImg" src="./static/image/choose@2x.png" alt="">过期退</span>
            </div>
            <img style="width:16px;height:14px" src="./static/image/more@2x.png" alt="">
          </div>

          <div class="flex mif">
            <img src="./static/image/book.png" style="width:20px;height:20px;margin:0 10px 0 5px" alt=""> 
            <div class="flex1"><span>免费预约</span></div>
            <div class="flex1 gray"  style="text-align:right "><span>预约免挂号</span></div>
            <img src="./static/image/more@2x.png" style="width:16px;height:14px" alt="">
          </div>
      </div>
      <div class="startbox" style="margin-top:0">
        <a :href="appUrl" class="tellBox">
          <img :src="logo_url" alt="logo">
        </a>
        <div class="font3" style="flex:1;width:0">
          <h4 class="font4" style="color:#535252">{{name}}</h4>
          <p class="oneLine"><img src="./static/image/time.png" alt=""><span>{{openTime}}</span></p>
          <p class="oneLine"><img src="./static/image/local.png" alt=""><span>{{positon}}</span></p>
          <p class="flex" style="align-items: center;">
            <img src="./static/image/star@2x.png" style="width:16px;height:16px" alt="">
            <span style="padding-left:3px;color:#FCC942">{{serviceScore}}</span>
            <span class="redius bgy">已认证</span>
            <span class="redius bgr">活动中</span>
          </p>
        </div>
      </div>
      
      <div class="doctor">
        <div class="bgf navmen" style="text-align:center">
          <div class="navmenbox">
            <div @click="checkFun1(0)" :class=" navStatus==0? 'active':''">商品详情</div>
          </div>
          <div class="navmenbox">
            <div @click="checkFun1(1)" :class=" navStatus==1? 'active':''">动态评价</div>
          </div>
          
        </div>
        <div  style="padding:10px 15px;">
          <div v-show="navStatus == 1">
            <div v-for="(item,index) in evluations" style="border-bottom:1px solid #F2F1F1">
              <div>
                <div class="user" style="border-bottom:none;padding:10px 0;">
                  <div class="headbox">
                    <img :src="item.dynamicUser.userHeader" alt="" class="userHead">
                  </div> 
                  <div class="userInfo flex">
                    <div class="userName flex1">{{item.dynamicUser.userNick}}</div> 
                    <div class="time" style="text-align:right">{{getTime(item.createtime)}}</div>
                  </div> 
                </div>
              </div>
              <div style="line-height:22px;margin-bottom:4px">{{item.dynamicContent}}</div>
              <div>
                <img class="pjImg" v-for="(chiItem,inx) in item.images" :src="chiItem.imageUrl" alt="">
              </div>
              <div class="flex" style="text-align:right;margin:5px 0 8px 0">
                <span class="flex1 gray"><img class="icon" src="./static/image/comment2@2x.png" alt="">{{item.countComment}}</span>
                <span class="flex1 gray"><img class="icon" src="./static/image/like@2x.png" alt="">{{item.countLike}}</span>
              </div>
            </div>
            <div v-if="evluations.length == 0" style="text-align:center;height:200px;line-height: 200px" class="gray">暂无评价</div>
          </div>  
          <div class="bgf" v-show="navStatus == 0" >
              <div v-html="introduction"></div>
          </div>
        </div>
      </div>
      <!-- 下载 -->
      <div class="footBox">
        <img src="./static/image/logo.png" alt="">
        <div class="center">
          <h5>牙记</h5>
          <div class="fixBoton">牙套计时分享社区</div>
        </div>
        <a :href="appUrl" class="lastBox">立即体验</a>
      </div>
  </div>

  <script src="./static/js/jquery-1.10.1.min.js" ></script>
  <script src="./static/js/swiper.min.js"></script>
  <script src="./static/js/vue.js"></script>
  <script src="./static/js/axios.js"></script>
  <script>
    new Vue({
      el:'#app',
      data:{
        banner:'', //图标
        appUrl:'',//挑战app
        logo_url:'',//logo
        navStatus:0,
        originalPrice:'',//原价
        price:'',//现价
        payCount:'',//已售
        name:'', //医院
        openTime:'',//营业时间
        positon:'',//地址
        serviceScore:'',//评星
        introduction:'',//商品详情
        doctorInfo:false,
        evluations:'', //评价
        productMarks:'',//服务
      },
      created() {  
        let url = location.href.split('?');
        let id = '';
      
        Object.keys(url).forEach(function(key){
          if(url[key].indexOf('id=') > -1){
            id = url[key].split('=')
            id = parseInt(id[1])
          }
        });
        
        axios.get(`https://www.yajiapp.com:8443/super_yaji/hospitalProduct/wap/${id}`)
        .then(res =>{
          let obj = res.data.data.product.introduction.replace(/img src=/g,'img style="width:100%" src=');
          
          this.banner = res.data.data.product.cover;
          this.introduction = obj;  
          this.name = res.data.data.product.hospitalInfo.name;
          this.title = res.data.data.product.title;
          this.originalPrice = res.data.data.product.originalPrice;
          this.price =  res.data.data.product.price;
          this.payCount = res.data.data.product.payCount;//已售
          this.logo_url = res.data.data.product.hospitalInfo.logo_url;
          this.openTime = res.data.data.product.hospitalInfo.business_time;
          this.positon = res.data.data.product.hospitalInfo.position;
          this.serviceScore = res.data.data.product.serviceScore
          this.evluations = res.data.data.evluations;
          this.productMarks = res.data.data.product.productMarks;
          //swiperFun(this.lists)
        })
        .catch(error =>{

        });
        const  ua = navigator.userAgent.toLowerCase();	
        if (/iphone|ipad|ipod/.test(ua)) {
          this.appUrl = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1130246825';
        } else if (/android/.test(ua)) {
        this.appUrl = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.grzx.toothdiary&from=groupmessage'
        }
      },
      methods:{
        time(val) {
          const now =  new Date(val)
          const month = now.getMonth()+1;
          const date = now.getDate();
          return `${month}月 ${date}日`
        },
        checkFun1(val){
          this.navStatus = val;
        },
        getTime(val){
          const now =  new Date(val)
          const month = now.getMonth()+1;
          const date = now.getDate();
          return `${month}月 ${date}日`
        },
        showDoctorInfo(){
          this.doctorInfo = !this.doctorInfo;
        },
        telFun(){
          console.log(this.tel)
          return `tel:${this.tel}`
        },
        userActive(val){
          if(!val) return '';
          if (val.indexOf('http://pdpaxe7t4.bkt.clouddn.com') > -1 || val.length > 30) {
            return val
          } else {
            return `http://pdpaxe7t4.bkt.clouddn.com/${val}`
          }
        }
      }

    })

    function swiperFun(obj){
      let ohtm = '';
      for(let i = 0; i < obj.length; i++) {
        ohtm +=`<div class="swiper-slide" style="height:270px"><img class="swiperImage" style="width: 100%;display: inline-block;" src="${obj[i]}"/></div>`
      };

      $('#seiper').html(ohtm)
      var mySwiper = new Swiper ('.swiper-container', {
        autoplay: {
          number:500
        },//可选选项，自动滑动
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        }
      })
    }
  </script>
</body>
</html>